<template>
  <div v-if="showView" className="energy-use-trend-container">
    <div className="energy-use-trend-view" id="energy-use-trend-id"></div>
  </div>

  <div v-else className="noData">
    <p><img src="../../../assets/nodata.png"></p>
    <p>暂无数据</p>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {onMounted, ref, onBeforeUnmount} from 'vue';

export default {
  setup() {
    let waterEleRateChart = null;
    let showView = ref(true);
    // 初始化图表
    const initChart = () => {
      const chartDom = document.getElementById('energy-use-trend-id');
      waterEleRateChart = echarts.init(chartDom);
    };
    let colors = ["#4e6de0", "#b688dc", "#81c4c7", "#00cc99", "#0066ff", "#db2365"];
    const setData = (dataList, xAxis) => {
      if (!dataList) {
        showView.value = false;
        return;
      }
      initChart();
      let series = [];
      let indexNum=0;
      dataList.forEach(function (item) {
        indexNum++;
        if(indexNum>colors.length) indexNum=0
        series.push({
          name: item.name,
          type: 'line',
          data: item.data,
          lineStyle: {
            normal: {
              width: 2,
              // color: '#3374EB',
              color: colors[indexNum],
              shadowColor: colors[indexNum],
              shadowBlur: 4,
              shadowOffsetY: 3
            }
          },
          symbol: 'emptyCircle',
          showSymbol: false,
          itemStyle: {
            normal: {
              color: colors[indexNum],
              shadowColor: colors[indexNum],
              shadowBlur: 2,
              borderWidth: 2,
              borderColor: "#F8F8FF"
            }
          },
          smooth: true
        })
      })

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: {
              type: 'solid',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(255,255,255,0)', // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(255,255,255,1)', // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(255,255,255,0)', // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        },
        grid: {
          left: '5%',
          top: '10%',
          right: '5%',
          bottom: '15%',
        },
        legend: {
          right: 10,
          top: 0,
          textStyle: {
            color: '#8C8C8C',
          }
        },
        xAxis: [{
          type: 'category',
          data: xAxis,
          axisLabel: {
            show: true,
            fontSize: 12,
            textStyle: {
              color: "#C9C8CD" //X轴文字颜色
            },
            formatter: function (value) {
              var str = "";
              // str += value.substring(0, 4) + "\n";
              str += value.substring(5, 10);
              return str;
            }
          },
          axisLine: {
            show: false //不显示x轴
          },
          axisTick: {
            show: false //不显示刻度
          },
          boundaryGap: false,
          splitLine: {
            show: false
          }
        }],
        yAxis: [{
          type: 'value',
          scale: true, //坐标轴起点不限制0
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 9,
              color: "#C9C8CD" //X轴文字颜色
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#fff'],
              opacity:0.06
            }

          },
          axisTick: {
            show: false, //不显示刻度
          },
          axisLine: {
            show: false,
          },
          nameTextStyle: {
            color: "#FFFFFF"
          },
          splitArea: {
            show: false
          }
        }],
        series: series
      };
      waterEleRateChart.setOption(option, true);
    }
    onBeforeUnmount(() => {
      if (waterEleRateChart) {
        waterEleRateChart.dispose();
      }
    });

    return {
      setData,
      showView
    };
  }
};
</script>

<style scoped>
.energy-use-trend-container {
  width: 100%;
  height: 300px;
}

.energy-use-trend-view {
  width: 100%;
  height: 300px;
}
</style>
